<template>
  <div class="q-pa-md">
    <t-badge color="secondary"> Model: {{ standard }} (0 to 50) </t-badge>

    <div class="row justify-around">
      <t-slider
        v-model="standard"
        :min="0"
        :max="50"
        vertical
        label
        switch-label-side
      />

      <t-slider
        v-model="standard"
        :min="0"
        :max="50"
        color="green"
        vertical
        reverse
        label-always
      />
    </div>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        standard: ref(10),
      };
    },
  };
</script>
